<template>
    <div class="body_address">
        <div class="select_address_header">
            <van-icon name="arrow-left" size="30px" @click="go_back" />
            <div class="title_slt">我的地址</div>
            <van-icon name="plus" size="30px" @click="add_address('')" />
        </div>
        <van-radio-group v-model="checked_address">
            <div class="container" v-for="(item,index) in my_address" :key="item.id">
                <van-radio :name="item.id" checked-color="green" style="padding-right: 5vw;"
                    @click="group_change(item.id)">
                </van-radio>
                <div class="address_info">
                    <div class="my_name">
                        <span>买家姓名：{{item.name}}</span>
                        <div class="icons">
                            <van-icon name="records" size="30px" color="red" @click="add_address(item.id)" />
                            <van-icon name="delete-o" size="30px" color="red" @click="delete_address(item.id)" />
                        </div>
                    </div>
                    <div>手机号码：{{item.tel}}</div>
                    <div class="my_address">收货地址：{{item.province + item.city + item.county +item.addressDetail}}</div>
                </div>
            </div>
        </van-radio-group>

    </div>
</template>
    
<script setup lang='ts'>
import { ref, onBeforeUpdate, onMounted } from 'vue'
import { useRouter } from "vue-router";
import { useMainStore } from "@/store";
import Product from '@/api/main';

let my_store = useMainStore()
const Router = useRouter()
let checked_address: any = ref('')
let _product = new Product()

// onMounted(() => {
//     my_store.myAddress.forEach((item) => {
//         if ((item.isDefault as any) == 'true') {
//             checked_address.value = item.id + ''
//         }
//     })
// })
let my_address: any = ref([])

_product.getAddress().then(res => {
    res.data.forEach((item: any) => {
        my_address.value = res.data
        if ((item.isDefault as any) == 'true') {
            checked_address.value = item.id + ''
        }
    })
})


function go_back() {
    Router.go(-1)
}

function add_address(cc: any) {
    Router.push({
        path: '/addAddress',
        query: {
            id: cc
        }
    })
}
function group_change(id: any) {
    my_address.value.forEach((item: any) => {
        if (item.id == id) {
            item.isDefault = true
        }
    })
    _product.updateAddressStatus({ id }).then(res => { })
}
function delete_address(id: any) {
    _product.deleteAddress(id).then(res => { })
}
</script>
    
<style scoped>
.body_address {
    background-color: #eee;
}

.select_address_header {
    background-color: #fff;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2vw;
    border-bottom: 1px solid #eee;
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    margin: 3vw 0;
    padding: 5vw 5vw 3vw 5vw;
}

.my_address {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.my_name {
    overflow: hidden;
}

.icons {
    float: right;
}

.address_info {
    width: 100%;
}
</style>